<template>
  <div class="service-comment">
    <div class="text" v-if="!openComment">评论已关闭</div>
    <div class="comment" v-else>
      <div class="txt">请上传截图(最多{{maxImage}}张):</div>
      <cube-upload
        v-model="fileList"
        :action="action"
        :max="maxImage"
        :simultaneous-uploads="1"
        @file-success="success"
        @file-removed="remove"
        @files-added="filesAdded" />
      <div class="txt">请填写评论:</div>
      <cube-textarea
        class="content"
        v-model="content"
        :placeholder="'请输入评论'"
        :maxlength="maxlength"
        :readonly="readonly"
        :disabled="disabled"
        :autofocus="autofocus"
      ></cube-textarea>
      <cube-button type="submit" class="submit" @click="submit">提 交</cube-button>
    </div>
  </div>
</template>

<script>
import config from '@/config/code'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'ServiceComment',
  data() {
    return {
      openComment: true,
      // image list
      fileList: [],
      maxImage: 10,
      // content
      content: '',
      readonly: false,
      maxlength: 10000,
      disabled: false,
      autofocus: false
    }
  },
  computed: {
    action() {
      return {
        // target: `${process.env.VUE_APP_BASE_API}/api/upload/execute?max-width=750&width=350`,
        // 没有上传width,不会有thumb图
        // max-width, 只要限制本图的宽度
        target: `${process.env.VUE_APP_BASE_API}/api/comment/upload?max-width=750`,
        headers: this.headers,
        data: {
          id: this.$route.params.id
        }
      }
    },
    headers() {
      // console.log(this.$store.getters['ExecUser/token'])
      // const tokenName = process.env.VUE_APP_TOKEN
      return {
        // 'X-Token-YANG': this.$store.getters['ExecUser/token']
        [process.env.VUE_APP_TOKEN]: this.$store.getters['ExecUser/token']
      }
    }
  },
  methods: {
    filesAdded(files) {
      let hasIgnore = false
      // const maxSize = 1 * 1024 * 1024 // 1M
      const maxSize = 1 * 1024 * 1024 * 10 // 10M
      for (const k in files) {
        const file = files[k]
        if (file.size > maxSize) {
          file.ignore = true
          hasIgnore = true
        }
      }
      hasIgnore && this.$createToast({
        type: 'warn',
        time: 1000,
        // txt: 'You selected >1M files'
        txt: '文件超过了10M'
      }).show()
    },
    success(data) {
      const { response } = data
      // console.log(response, config.CODE_SUCCESS)
      if (response.code === config.CODE_SUCCESS) {
        this.fileList[this.fileList.length - 1].id = response.data.id
        // console.log(this.fileList)
        return this.$createToast({
          type: 'correct',
          time: 1500,
          txt: response.message,
          onTimeout: () => {
          }
        }).show()
      }
      if (response.code === config.CODE_ERROR) {
        // delete last item
        this.fileList.pop()
        return this.$createToast({
          type: 'error',
          time: 1500,
          txt: response.message
        }).show()
      }
    },
    remove(data) {
      // console.log(data, this.fileList)
    },
    check() {
      api.Comment.check({
        id: this.$route.params.id
      }).then(response => {
        const { data } = response
        if (data.is !== true) {
          this.openComment = false
          return this.$createToast({
            type: 'error',
            time: 1500,
            txt: data.message,
            onTimeout: () => {
              this.$router.back()
            }
          }).show()
        }
      })
    },
    submit() {
      const images = this.fileList.map(x => x.id)
      const content = this.content
      // console.log(images, content)
      if (!images || !content) {
        return this.$createToast({
          type: 'error',
          time: 1500,
          txt: '请填写完整~~~~~~'
        }).show()
      }
      api.Comment.save({
        content,
        images,
        id: this.$route.params.id
      }).then(() => {
        return this.$createToast({
          type: 'correct',
          time: 1500,
          txt: '提交成功, 请等待审核!',
          onTimeout: () => {
            // this.$router.back()
            this.$router.push('/service/order/0')
          }
        }).show()
      })
    }
  },
  created() {
    this.check()
  }
}
</script>

<style scoped lang="stylus">
.service-comment
  .text
    margin-top 30px
    color #ccc
  .comment
    padding 10px
    background white
    border-radius 10px
    .txt
      height 30px
      line-height 30px
      font-weight 700
      text-align left
    .content
      min-height 100px
    .submit
      margin 10px 0
</style>
